<template>
  <div class="container" ref="echartRef"></div>
</template>

<script>
import * as echarts from "echarts";
import useEcharts from "./useEcharts";
export default {
  props: {
    options: {
      type: Object,
      require: true,
    },
  },
  mounted() {
    const echartInstance = echarts.init(this.$refs.echartRef);
    this.unWatch = this.$watch(
      () => this.options,
      (newOpt) => echartInstance.setOption(newOpt),
      {
        deep: true,
        immediate: true,
      }
    );
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
